<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    :unmount-on-close="true"
    :align-center="false"
    :closable="false"
    modal-class="none"
    :render-to-body="!isFullscreen"
    :mask="false"
    class="content-model"
    :class="{
      'short-modal': appStore.menuCollapse,
      'no-footer': !hasFooter,
      screenModal: isFullscreen,
    }"
    @close="closeHandle"
    @open="openHandle"
  >
    <div class="content-body">
      <div class="header-con" :class="{ 'no-border': noHeaderBorder }">
        <div class="back-con" @click="closeModal">
          <icon-left />
          返回
        </div>
        <div class="title-con">{{ title }}</div>
        <div class="left-slot">
          <slot name="header-left" />
        </div>
        <div class="right-slot">
          <slot name="header-right" />
        </div>
      </div>
      <div class="content-con">
        <slot />
      </div>
    </div>
    <template #footer>
      <div class="footer-con">
        <slot name="footer" />
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import useModal from '@/common/hooks/modal';
  import { onUnmounted, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { isFullscreen } from '@/common/hooks/full-screen';

  const route = useRoute();
  const { showModal, closeModal } = useModal(true);

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    hasFooter: {
      type: Boolean,
      default: true,
    },
    noHeaderBorder: {
      type: Boolean,
      default: false,
    },
  });
  const appStore = useAppStore();
  const emit = defineEmits(['close', 'open']);
  const closeHandle = () => {
    emit('close');
  };
  const openHandle = () => {
    emit('open');
  };
  console.log('props', props);

  lockBodyScroll();

  function lockBodyScroll() {
    // 计算滚动条宽度
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth;

    // 锁定滚动条
    document.body.style.overflow = 'hidden';
    document.body.style.paddingRight = `${scrollbarWidth}px`;
  }

  function unlockBodyScroll() {
    // 解除滚动条锁定
    document.body.style.overflow = '';
    document.body.style.paddingRight = '';
  }

  onUnmounted(() => {
    unlockBodyScroll();
  });

  // 监听路由变化 销毁自己
  watch(
    () => route.path,
    () => {
      closeModal();
    }
  );
</script>

<style lang="less" scoped>
  .content-body {
    height: 100%;
    display: flex;
    flex-direction: column;

    .header-con {
      display: flex;
      align-items: center;
      padding: 16px 0;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .no-border {
      border-bottom: unset;
      margin-bottom: 0;
    }

    .content-con {
      flex: 1;
      height: calc(100% - 50px);
      overflow-y: auto;
      overflow-x: hidden;
    }

    .back-con {
      cursor: pointer;
      font-weight: 300;
      font-size: 14px;
      color: #1e89ff;
      padding-right: 16px;
      border-right: 1px solid #e4e7ed;
    }

    .left-slot {
      flex: 1;
      width: 1px;
      padding-left: 15px;
    }

    .title-con {
      padding-left: 16px;
      font-weight: 600;
      font-size: 16px;
      color: #1e2228;
      line-height: 24px;
    }
  }
</style>

<style lang="less">
  .isScreen {
    .content-model {
      bottom: 0 !important;
      padding-bottom: 16px !important;
      background-color: #f0f2f5;
      top: 58px !important;
      right: 0 !important;
      left: 0 !important;
      bottom: 0 !important;

      .arco-modal {
        height: calc(100vh - 60px);
      }
    }
  }

  .content-model {
    bottom: 0 !important;
    padding-bottom: 16px !important;
    background-color: #f0f2f5;
    top: 94px + 16px !important;
    right: 16px !important;
    left: 208px + 16px !important;
    border-radius: 8px;

    .arco-modal {
      width: 100%;
      height: calc(100vh - 128px);
      top: 0;
      display: flex;
      flex-direction: column;

      .arco-modal-body {
        height: 100%;
        padding: 0px 24px;
      }

      .arco-modal-footer {
        width: 100%;
        padding: 12px 24px;
        text-align: right;
        border-top: unset;

        button {
          margin-left: 8px;
        }
      }
    }

    .zoom-modal-leave-active {
      transition: unset !important;
    }

    .zoom-modal-leave-to {
      transition: unset !important;
    }

    .zoom-modal-enter-from,
    .zoom-modal-appear-from {
      transform: unset !important;
      opacity: 1;
    }

    .zoom-modal-enter-active,
    .zoom-modal-appear-active {
      transition: unset !important;
    }

    .arco-modal-footer {
      box-shadow: 0 -2px 8px #ddd;
      z-index: 999;
    }
  }

  .short-modal {
    left: 48px + 16px;
  }

  .no-footer {
    .arco-modal-footer {
      box-shadow: none;
    }
  }
</style>
